<template>
  <div>
    <!-- 整个色系  #804f22 -->
    <header>
      <div class="h_top">
        <div class="h_left">
          嗨，欢迎来到订花乐！
          <span>
            <img src="../assets/weichat.svg" alt="">
            关注微信
            <!-- <img src="../assets/erwei.jpeg" alt="" class="hidden"> -->
          </span>
        </div>
        <div class="h_right">
          <span v-if="!ph">
          <router-link to="/login">你好，请登录</router-link>
          <router-link to="/register" class="reg_co">免费注册</router-link>
          </span>
          <span v-else>
            <a href="#">欢迎你：{{ph}}</a>
            <a href="/index" @click="destroy">退出</a>
          </span>
          <span class="line"></span>
          <a href="#">订单查询</a>
          <span class="line"></span>
          <a href="/car">
            <img src="../assets/car.svg" alt="">
            <span>购物车</span>
            <span>({{count}})</span>
          </a>
          <span class="line"></span>
          <a href="#">手机下单</a>
        </div>
      </div>
      <div class="h_bottom">
        <div class="search">
          <div class="logo">
              <a href="/index">
                <img src="../assets/logo1.png" alt="">
              </a>
          </div>
          <div class="search_s">
            <div>
              <input type="text" placeholder="请输入需要搜索的关键字">
              <div>
                <img src="../assets/search.png" alt="">
              </div>
            </div>
            <div>
              <div>红玫瑰</div>
              <div>蛋糕</div>
              <div>百合</div>
              <div>康乃馨</div>
            </div>
          </div>
          <div class="search_r">
            <img src="../assets/phone.svg" alt="">
            <span>400-060-1520</span>
          </div>
        </div>
        <div class="nav">
          <ul>
            <li>
              <span>全部商品分类</span>
              <img src="../assets/tra.svg" alt="">
            </li>
            <li>
              <a href="#">鲜花</a>
            </li>
            <li>
              <a href="#">花束</a>
            </li>
            <li>
              <a href="#">礼盒</a>
            </li>
            <li>
              <a href="#">蛋糕</a>
            </li>
            <li>
              <a href="#">花篮</a>
            </li>
            <li>
              <a href="#">绿植</a>
            </li>
            <li>
              <a href="#">周花</a>
            </li>
            <li>
              <a href="#">3.8女神节鲜花</a>
            </li>
          </ul>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ph: '',
        num:''
      }
    },
    mounted () {
      this.ph=JSON.parse(sessionStorage.getItem('ph'))
    },
    computed:{
      count(){
        let count=JSON.parse(localStorage.getItem('carItems'))
        return count?count.length:0
      }
    },
    methods: {
      destroy() {
        sessionStorage.removeItem('ph')
      }
    },
  }
</script>

<style lang="scss" scoped>
header{
  color: #999;
  font-size: 14px;
  // 顶部
  .h_top{
    height: 32px;
    background-color: #f2f2f2;
    padding: 6px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .h_right{
      .line{
        display: inline-block;
        width: 1px;
        height: 10px;
        background-color: #999;
        margin: 0 16px;
      }
      a{
        text-decoration: none;
        color: #999;
        margin-left: 10px;
      }
      >a>img{
        margin-right: 10px;
      }
      >a>span+span{
        margin-left: 5px;
        color: #804f22;
      }
      .reg_co{
        color: rgb(136,78,34);
      }
    }
  }
  // 搜索一栏
  .h_bottom{
    .search{
      display: flex;
      justify-content: space-around;
      align-items: center;
      .logo{
        a{
          img{
            width: 170px;
          }
        }
      }
      .search_s{
        width: 408px;
        height: 79px;
        margin-top: 40px;
        >div:first-child{
          height: 43px;
          border: 1px solid rgb(136,78,34);
          display: flex;
          justify-content: space-between;
          padding-left: 10px;
          input{
            width: 350px;
            height: 40px;
            outline: none;
            border: none;
          }
          div{
            width: 50px;
            height: 43px;
            margin: 0;
            background-color: #804f22;
            line-height: 43px;
            text-align: center;
          }
        }
        >div:last-child{
          height: 34px;
          margin-top: 10px;
          margin-left: 0;
          display: flex;
          >div{
            height: 14px;
            border-right: 1px solid #999;
            padding: 0 6px;
            line-height: 14px;
          }
          >div:hover{
            cursor: pointer;
            color: #804f22;
          }
        }
      }
      .search_r{
        >img{
          margin-right: 5px;
        }
      }
    }
    // 导航一栏
    .nav{
      ul{
        list-style: none;
        font-size: 16px;
        display: flex;
        border-bottom: 2px solid #804f22;
        margin-bottom: 0;
        a{
          text-decoration: none;
          color: #333;
          font-weight: bold;
        }
        a:hover{
          color: #804f22;
        }
        >li:first-child{
          width: 200px;
          line-height: 40px;
          background-color: #804f22;
          margin-right: 20px;
          span{
            margin-left: 20px;
            color: #fff;
          }
          img{
            float: right;
            margin-top: 10px;
            margin-right: 20px;
          }
        }
        >li:not(:first-child){
          margin: 10px 20px;
        }
      }
    }
    
  }
}
</style>